/**
 * 这是自助教程展示页面对应的js文件
 * 可以展示所有的自助教程
 */

function album() {

	var leftBox = $("#left_box");
	var bigImgBox = $("#big_img_box");
	var imgBoxList = [];
	var nowIndex = 0;
	var _nameList = null;
	var pagingBackBtn = $("#paging_back_btn");
	var pagingNextBtn = $("#paging_next_btn");
	var imgBoxWrapper = $("#img_box_wrapper");
	var nowPageNo = $("#now_page_no");
	var leftAside = $("#left_aside");
	leftAside.attr("style", "background: rgba(0, 0, 0, 0.6)");

	imgBoxWrapper.show();

	function goBack() {
		if (nowIndex === 0) return;

		nowIndex--;
		changeBigImage(_nameList[nowIndex], nowIndex);

		if (nowIndex === 0) {
			pagingBackBtn.hide();
		} else {
			pagingBackBtn.show();
		}
		pagingNextBtn.show();
	}

	function goNext() {
		if (nowIndex === _nameList.length - 1) return;

		nowIndex++;
		changeBigImage(_nameList[nowIndex], nowIndex);

		if (nowIndex === _nameList.length - 1) {
			pagingNextBtn.hide();
		} else {
			pagingNextBtn.show();
		}
		pagingBackBtn.show();
	}

	pagingBackBtn.on('click', goBack);
	pagingNextBtn.on('click', goNext);

	pagingBackBtn.hide();

	var startPos;
	const MOVE_HEIGHT = window.screenTop / 3;

	bigImgBox.bind('touchstart', function (e) {
		var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
		startPos = touch.pageY; //取第一个touch的坐标值
	});

	bigImgBox.bind("touchmove", function (e) {

		if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
		var touch = event.targetTouches[0];
		var endPos = touch.pageY - startPos;

		if (endPos > MOVE_HEIGHT) { // 向下
			goBack();
		} else if (endPos < -MOVE_HEIGHT) { // 向上
			goNext();
		}
	});

	function changeBigImage(name, index) {

		loadBigImg(bigImgBox, name);
		nowPageNo.text(index + 1);

		nowIndex = index;

		if (index === 0) {
			pagingBackBtn.hide();
		} else {
			pagingBackBtn.show();
		}
		if (index === _nameList.length - 1) {
			pagingNextBtn.hide();
		} else {
			pagingNextBtn.show();
		}
	}

	function loadBigImg(bigImgBox, name) {
		bigImgBox.empty();

		let img = $("<img src='" + name + "' />");

		img.on('load', function () {

			// x > y 
			if (img.width() > img.height()) {
				if (img.width() > bigImgBox.width()) {
					img.width(bigImgBox.width() - 50);
				}
			} else {
				if (img.height() > bigImgBox.height()) {
					img.height(bigImgBox.height() - 50);
				}
			}
		});



		bigImgBox.append(img);
	}

	function loadImgList() {
		var manualImgListBox = $("<div class='manual_imgs_list'></div>");

		for (var i = 0, len = _nameList.length; i < len; i++) {

			(function (name, index, now) {
				var imgBox = $("<div id='" + name + "_" + index + "'></div>");
				var img = $("<img src='" + name + "' />");
				img.on('click', function () {
					changeBigImage(name, now);
				});
				imgBox.append(img);

				var num = $("<span class='img_index text-white ml-3 h3'>" + index + "</span>");
				imgBox.append(num);

				manualImgListBox.append(imgBox);

				imgBoxList.push(imgBox);

			})(_nameList[i], i + 1, i);
		}

		leftBox.append(manualImgListBox);

		changeBigImage(_nameList[0], 0); // 预先载入第一张图
	}

	function getImgNameList(reqUrl, reqData, fileType, callback) { // 这个函数可以用 ajax 替换

		$.get({
			url: reqUrl,
			data: reqData,
			dataType: 'json',
			success: function (req) {

				imgBoxWrapper.show();

				if (req.code == 0) {
					if (callback) {
						callback(req); // 各种不同条件下的设置会有不同，所以这里采用回调形式载入; 
					}

					_nameList = req[fileType];

					loadImgList();

				} else if (req.code == 1) {
					DIALOG.INFO("温馨提示", req.msg);
				}
			},
			fail: function () {
				DIALOG.ERROR("提示", "找不到教程");
			}
		});
	}

	return {
		// 这个函数是需要从服务器上读取某些配置，然后获得图片，适合于动态的 url
		loadDynamicUrl: function (reqUrl, reqData, fileType, callback) {
			getImgNameList(reqUrl, reqData, fileType, callback);
		},
		// 这个函数是静态的 url
		loadStaticUrl: function (nameList) {
			_nameList = nameList;
			loadImgList();
		},
		close: function (callback) {
			leftAside.attr("style", null);
			callback();
		}
	}
};
